<template>
	<view class="move-contentBox">
		<view class="move-main">
			<view class="tip" :style="{left:(redLeft-itemWidth)+'px'}">
				￥{{numLeft}}
			</view>
			<view class="tip" :style="{left:(blueLeft-itemWidth)+'px'}">
				￥{{numRight}}
			</view>
			<movable-area class="moveBox" style="">
				<movable-view @change="changeRed" direction="horizontal" class="moveItem"
					style="position: relative;z-index: 10;"></movable-view>
				<view class="line" :style="{width:lineWidth+'px',left:lineLeft+'px'}">

				</view>
				<movable-view :x="activeWidth" @change="changeBlue" class="moveItem blue" direction="horizontal">
				</movable-view>

			</movable-area>
			<view class="lineBg">

			</view>

		</view>
		<view class="areaPrice">
			<view class="priceItem">
				￥{{minNum}}
			</view>
			<view class="priceItem">
				￥{{maxNum}}
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			minNum: {
				type: [Number, String],
				default: 10000
			},
			maxNum: {
				type: [Number, String],
				default: 50000
			},
		},
		data() {
			return {
				itemRight: 0,
				numLeft: 0,
				numRight: 0,
				lineWidth: 0,
				lineLeft: 0,
				redLeft: 0,
				blueLeft: 0,
				itemWidth: 0,
				activeWidth: 0,
				
				
			};
		},
		mounted() {
			this.getLineInner()
			this.numLeft = this.minNum
			this.numRight = this.maxNum
		},
		methods: {
			getLineInner() {
				let q = uni.createSelectorQuery().in(this)
				// q.select('#scrollview').boundingClientRect()
				q.selectAll('.lineBg').boundingClientRect()
				q.selectAll('.moveItem').boundingClientRect()

				q.exec(res => {
					this.activeWidth = res[0][0].width - res[1][0].width
					this.itemRight = this.activeWidth - res[1][0].width
					this.itemWidth = res[1][0].width
				})
			},
			changeRed(e) {
				this.redLeft = e.detail.x
				this.lineWidth = Math.abs(this.redLeft - this.blueLeft) - 19
				if (this.redLeft < this.blueLeft) {
					this.lineLeft = this.redLeft + 19
				} else {
					this.lineLeft = this.blueLeft + 19
				}

				this.numLeft = Math.ceil(this.redLeft / this.activeWidth * (this.maxNum - this.minNum)) + this.minNum

				let minNum = this.minNum
				let maxNum = this.minNum
				if (this.numLeft > this.numRight) {
					minNum = this.numRight
					maxNum = this.numLeft
				} else {
					minNum = this.numLeft
					maxNum = this.numRight
				}
				
				this.$emit('change',{minNum,maxNum})
			},
			changeBlue(e) {
				this.blueLeft = e.detail.x
				this.lineWidth = Math.abs(this.redLeft - this.blueLeft) - 19
				if (this.redLeft < this.blueLeft) {
					this.lineLeft = this.redLeft + 19
				} else {
					this.lineLeft = this.blueLeft + 19
				}
				this.numRight = Math.ceil(this.blueLeft / this.activeWidth * (this.maxNum - this.minNum)) + this.minNum
				
				let minNum = this.minNum
				let maxNum = this.minNum
				if (this.numLeft > this.numRight) {
					minNum = this.numRight
					maxNum = this.numLeft
				} else {
					minNum = this.numLeft
					maxNum = this.numRight
				}
				
				this.$emit('change',{minNum,maxNum})
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.move-main {
		position: relative;
		width: 650rpx;
		margin: 0 auto;
	}

	.tip {
		position: absolute;
		color: #fff;
		background-color: #333;
		top: -60rpx;
		padding: 6rpx 20rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		min-width: 80rpx;

		&::before {
			position: absolute;
			content: '';
			border: 10rpx solid #333;
			bottom: -10rpx;
			right: 45%;
			border-color: transparent #333 transparent transparent;
		}
	}

	.moveBox {
		width: 100%;
		height: 50rpx;
		position: relative;
		z-index: 6;
	}

	.moveItem {
		border-radius: 50%;
		width: 38rpx;
		height: 38rpx;
		border: 4rpx solid $main-color;
		background-color: #fff;
	}

	.blue {
		// border: 4rpx solid blue;
		// position: relative;
		// z-index: 8;
	}

	.line {
		position: absolute;
		top: 50%;
		transform: translateY(-58%);
		height: 4rpx;
		background-color: $main-color;
		z-index: 9;
	}

	.lineBg {
		width: 100%;
		height: 4rpx;
		background-color: #dedede;
		position: absolute;
		top: 50%;
		transform: translateY(-58%);
		z-index: 0;
	}

	.areaPrice {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #747474;

		.priceItem {}
	}
</style>
